<template>
	<div>csstest</div>
	<div>设置input 的placeholder的字体样式</div>
	<input class="inputPl" placeholder="请设置用户名" />
	
	<div>相邻兄弟选择器之常用场景li+li</div>
	<div>outline属性的妙用技巧：outline不占据空间，绘制于元素内容周围</div>
	<div>h5页面移动端hover变成了点击效果</div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>

	<!-- 隐藏滚动条或更改滚动条样式 -->
	<div>隐藏滚动条或更改滚动条样式</div>
	<p class="scroll-container">
		庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
	</p>

	<div>text-indent实现隐藏文字</div>
	<div class="logo">
		<h1>
			<a href="#" role="img" class="logo-bd clearfix">淘宝网</a>
		</h1>
	</div>

	<div>块居中</div>
	<div class="block"></div>
	<div>块内元素垂直对齐</div>
	<div class="block">
		<div>123<img class="inlineBlo"/>456</div>
	</div>

	<div>设置下一个或上一个兄弟元素样式</div>
	<div>
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
		<button class="current">current</button>
		<button>+ button</button>
		<button>~ button</button>
		<button>~ button</button>
		<button>~ button</button>
		<button>~ button</button>
	</div>

	<div>宽高比</div>
	<div>如下，创建一个 360px 宽的 16 x 9 矩形：</div>
	<div>方案会导致里面所有的元素都必须向上移动或需要使用绝对定位</div>
	<div class="box">
		<div class="boxMain">
			<div>222</div>
		</div>
	</div>

	<div>aspect-ratio 为box容器规定了一个期待的纵横比</div>
	<div>如下，创建一个 360px 宽的 16 x 9 矩形：</div>
	<div class="box">
		<div class="boxMainAspect">
			<div>222</div>
		</div>
	</div>


</template>

<script  scoped="scoped">
	import {
		ref,
		reactive
	} from 'vue'
	export default {
		data() {
			return {}
		},
		mounted() {},

	}
</script>

<style scoped="scoped">
	#app {
		text-align: left;
	}
	.inputPl{
		display: "";
	}
	/* 设置input占位符的样式 */
	input::-webkit-input-placeholder {
		color: red;
	}

	/* 设置input聚焦时的样式 */
	input:focus {
		background-color: green;
	}

	/* 取消input的边框 */
	input {
		border: none;
		outline: none;
	}

	* {
		padding: 0;
		margin: 0;
	}

	ul {
		list-style: none;
		width: 300px;
		margin: auto;
	}

	li {
		padding: 10px;
		border: 10px solid pink;
	}

	li+li {
		margin-top: -10px;
	}

	/* outline-offset设置负数，实现缩小偏移 */
	li:hover {
		/* border:10px solid gold; */
		outline: 10px solid gold;
		outline-offset: -10px;
	}


	.scroll-container {
		width: 330px;
		height: 150px;
		border: 1px solid #ddd;
		padding: 15px;
		overflow: auto;
		/*必须*/
	}

	.scroll-container::-webkit-scrollbar {
		width: 8px;
		background: white;
	}

	.scroll-container::-webkit-scrollbar-corner,
	/* 滚动条角落 */
	.scroll-container::-webkit-scrollbar-thumb,
	.scroll-container::-webkit-scrollbar-track {
		/*滚动条的轨道*/
		border-radius: 4px;
	}

	.scroll-container::-webkit-scrollbar-corner,
	.scroll-container::-webkit-scrollbar-track {
		/* 滚动条轨道 */
		background-color: rgba(180, 160, 120, 0.1);
		box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
	}

	.scroll-container::-webkit-scrollbar-thumb {
		/* 滚动条手柄 */
		background-color: #00adb5;
	}


	.logo {
		width: 190px;
		height: 80px;
		/* float: left; */
		margin-top: 8px;
		outline: 1px solid #00f;
	}

	.logo h1 {
		position: relative
	}

	.logo h1 .logo-bd {
		display: block;
		margin-left: 22px;
		padding-top: 58px;
		width: 142px;
		overflow: hidden;
		background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
		text-indent: -9999px;
	}

	.block {
		width: 200px;
		height: 100px;
		outline: 1px solid #f00;
		display: block;
		margin: 0 auto;
	}
	.block div{
		outline: 1px solid #0f0;
	}

	.inlineBlo {
		display: inline-block;
		vertical-align: middle;
		height: 50px;
		width: 50px;
		outline: 1px solid #f00;
	}


	button {
		padding: 10px 15px;
		border: 1px solid #444444;
		font-size: 12px;
		background-color: #ff0000;
		color: #000;
	}

	.current {
		background: #000;
		color: #fff;
	}

	.current~button {
		/* initial使用初始化的颜色 */
		background: initial;
	}


	.box {
		width: 360px;
	}

	.boxMain {
		padding-top: calc((9/16)*100%);
		background: #666;
	}

	.boxMainAspect {
		aspect-ratio: 16/9;
		background: #666;
	}
</style>
